
@charset "utf-8";
/* CSS Document */

* {margin: 0; padding: 0; box-sizing: border-box; -webkit-overflow-scroll:touch; -webkit-overflow-scrolling: touch;}

html {font-size: calc(100vw/7.5);}
body {overflow: hidden; color: #333;}
body.fixed {position: fixed; bottom: 0; left: 0; width: 100%;}
img {display: block;}
button {width: 3.08rem; height: .88rem; display: block; border: none; box-shadow: 0 .15rem .2rem #a10202; border-radius: .2rem;}

.flex {display: -webkit-flex !important; display: flex !important;}
.item-center {align-items: center; justify-content: center;}
.center {text-align: center;}

.pop-bg {position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 999; background-color: rgba(0,0,0,.5); justify-content: center; align-items: center; display: none;}
.pop-bg.show {display: -webkit-flex; display: flex;}
.pop-bg .pop-box {width: 5.8rem; background-color: #ea5a52; border-radius: .4rem; border: #ff8a8a .04rem solid; box-shadow: 0 .1rem 0 #c54040; padding: .4rem; position: relative; display: none;}
.pop-bg .pop-box .pop-close {position: absolute; width: .48rem; top: .2rem; right: .2rem;}
.pop-bg .pop-box .rule-title {margin-bottom: .45rem;}
.pop-bg .pop-box .rule-title img {width: 1.95rem; margin: 0 auto;}
.pop-bg .pop-box .pop-content-box h1 {font-size: .24rem; line-height: .36rem; font-weight: bold; color: #fff;}
.pop-bg .pop-box .pop-content-box p {font-size: .24rem; line-height: .36rem; color: #fff; margin-bottom: .48rem;}
.pop-bg .pop-box .pop-tips-box {color: #fff; font-size: .18rem; color: #fff;}

.page {min-height: 100vh;}
.page.game {background-color: #278dff; display: none;}
.page.index {background-color: #7ee0df;}
.page .index-bg {position: absolute; left: 0; bottom: 1.6rem;}
.page.poster {background-image: url("../images/poster_bg.jpg"); background-size: 100% 100%; background-repeat: no-repeat; justify-content: center; align-items: center; display: none;}

.page .logo {position: absolute; width: 1.6rem; left: .3rem; top: .12rem;}
.page .slogan {position: absolute; width: 100%; height: 2.09rem; background-image: url("../images/slogan_img.png"); background-size: 100%; background-repeat: no-repeat; left: 0;     bottom: 8rem;}
.page .heart {position: absolute; width: 1rem; left: 2.65rem; top: .1rem;}
.page .index-bottom {position: absolute; width: 100%; background-color: #00a650; left: 0; bottom: 0;}
.page .index-bottom .bottom-bg {position: absolute; left: 0; top: -1rem;}
.page .game-start {background-image: url("../images/ganme_start_btn.png"); background-size: 100%; background-repeat: no-repeat; margin: -.5rem auto .5rem; box-shadow: 0 .15rem .2rem rgba(0,0,0,.2); position: relative;}
.page .rule-btn {position: absolute; width: 1.25rem; height: .3rem; background-image: url("../images/rule_btn.png"); background-size: 100%; background-repeat: no-repeat; top: .1rem; right: .4rem;}
.page .roll-box {width: 6.7rem; margin: 0 .4rem .3rem;}
.page .roll-box .swiper-slide {color: #fff; font-size: .3rem; line-height: .36rem; width: auto;}

.page.results {background-image: url("../images/results_bg.jpg"); background-color: #8ce8f0; background-size: 100%; background-repeat: no-repeat; background-position: left bottom; position: absolute; width: 100%;  left: 0; top: 0; z-index: 99; display: none;}
.page .results-box {width: 100%; height: 8.5rem; background-image: url("../images/results_box_bg.png"); background-size: 100%; background-repeat: no-repeat; position: absolute; left: 0; top: 1.2rem;}
.page .failed-box {padding-top: 3rem; display: none;}
.page .failed-box .failed-text {width: 2.16rem; margin: 0 auto;}
.page .failed-box .play-again {background: url("../images/play_again_btn.png") no-repeat; background-size: 100%; margin: 2.2rem auto 0;}
.page .success-box,.page .congratulations-box,.page .choose-box {text-align: center; color: #fff; font-weight: bold; display: none;}
.page .results-box .title {width: 4.15rem; margin: 0 auto;}
.page .success-box .jifen-box {font-size: .36rem; margin-top: .36rem;}
.page .success-box .rank-box {margin-top: .85rem; font-size: .36rem;}
.page .success-box .rank-box p span {font-size: .6rem; margin: 0 .1rem;}
.page .success-box .title-name-box {margin-top: .45rem; font-size: .36rem;}
.page .success-box .title-name-box p span {font-size: .48rem;}
.page .success-box .go-lottery {background: url("../images/go_lottery_btn.png") no-repeat; background-size: 100%; margin: .65rem auto 0;}
.page .results-box .gift-box {width: 3.2rem; margin: .36rem auto;}
.page .results-box .results-content-box p {text-align: center; font-size: .3rem; color: #fff;}
.page .results-box .go-choose {background: url("../images/go_choose_btn.png") no-repeat; background-size: 100%; margin: .4rem auto 0;}
.page .results-box .choose-tipes-box {color: #fff; font-size: .24rem; text-align: center; font-weight: bold; margin-top: .1rem;}
.page .results-box .choose-title {font-size: .36rem; margin-top: 1.3rem;}
.page .results-box .choose-box-content {margin-top: .88rem; justify-content: center;}
.page .results-box .choose-box-content .choose-sex-item {margin: 0 .49rem;}
.page .results-box  .choose-box-content .choose-sex-item .choose-sex-male {width: 1rem; height: 1rem; background-image: url("../images/male_icon.png"); background-size: 100%; background-repeat: no-repeat;}
.page .results-box .choose-box-content .choose-sex-item p {font-size: .3rem;}
.page .results-box .choose-box-content .choose-sex-item .choose-sex-female {width: 1rem; height: 1rem; background-image: url("../images/female_icon.png"); background-size: 100%; background-repeat: no-repeat;}
.page .results-box .choose-box-content .choose-sex-item.onthis .choose-sex-male { background-image: url("../images/male_icon_onthis.png"); background-size: 100%; background-repeat: no-repeat;}
.page .results-box .choose-box-content .choose-sex-item.onthis .choose-sex-female { background-image: url("../images/female_icon_onthis.png"); background-size: 100%; background-repeat: no-repeat;}
.page .results-box .choose-box-content button.choose-add {width: 2rem; height: .8rem; line-height: .8rem; text-align: center; color: #fff; font-size: .36rem; font-weight: bold; margin: 0 .2rem; background-color: rgba(255,255,255,.1); border: #fff 1px solid;}
.page .results-box .choose-box-content button.choose-add.onthis {background-color: #fff; color: #d62828;}

.page.poster > div {width: 6.7rem;}
.page .poster-box {width: 6.7rem; height: 10.6rem; position: relative;}
.page .poster-tips {margin-top: .2rem; text-align: center; color: #666; font-size: .24rem;}
.page .poster-box .user-info-box {position: absolute; width: 6.2rem; height: 1.6rem; left: .25rem; top: .3rem; background-color: rgba(255,255,255,.5); border: #fff 1px solid; border-radius: .15rem; align-items: center; padding: .2rem;}
.page .poster-box .user-info-box .user-img-box {width: 1.22rem; height: 1.22rem; margin-right: .3rem; border-radius: 50%; overflow: hidden; justify-content: center; justify-items: center;}
.page .poster-box .user-info-box .user-img-box > img {max-width: 100%; max-height: 100%;}
.page .poster-box .user-info-box .user-info-content p {font-size: .24rem; line-height: .48rem;}
.page .poster-box .user-info-box .user-info-content p strong {color: #ff3a37; font-size: .36rem;}
.page .poster-box .qr-code {position: absolute; width: 1.3rem; left: .35rem; bottom: .35rem;}

.page .game-bg-box {height: 300vh; position: absolute; width: 100%; left: 0; bottom: 0; background: #87e7ff;}
.page .game-bg-box.up-one {-webkit-animation: upOneAn 5s forwards linear; animation: upOneAn 5s forwards linear;}
.page .game-bg-box.up-two {-webkit-animation: upTwoAn 5s infinite linear; animation: upTwoAn 5s infinite linear;}
.page .game-bg-box.paused {-webkit-animation-play-state:paused; animation-play-state:paused;}
.page .game-bg-box .tiananmen {position: absolute; left: 0; bottom: 0;}
.page .game-bg-box .tree {position: absolute; left: 0; bottom: 2.4rem;}
.page .game-bg-box .cloud-box {position: absolute; width: 100%; bottom: 100vh;}
.page .game-bg-box .cloud-box > div {width: 100%; height: 100vh; background-image: url("../images/cloud_img.png"); background-size: 100%; background-repeat: no-repeat;}
.page .flag-box {position: absolute; width: .36rem; bottom: 0; left: 2.85rem; background-image: url("../images/flag_pole.png"); background-size: 100%; height: 100vh;}
.page .flag-box > img {position: absolute; left: 0; top: -.5rem;}
.page .flag {position: absolute; width: 4.5rem; height: 2.45rem; left: 50%; top: 50%; margin-top: -1.22rem; margin-left: -1.6rem; background-image: url("../images/flag.gif"); background-size: 100%; background-repeat: no-repeat;}
.page .flag-box.over {-webkit-animation: flagBoxOver 1s forwards linear; animation: flagBoxOver 1s forwards linear;}
.page .game-tips-box {position: absolute; width: 5.8rem; height: 4rem; background-color: rgba(0,0,0,.5); border-radius: .2rem; top: 50%; left: 50%; margin-top: -2rem; margin-left: -2.9rem; display: none;}
.page .game-tips-box img {display: none;}
.page .leaf {position: absolute; width: 1rem;}
.page .left {left: -20%;}
.page .right {left: 100%;}
.page .top {top: -20%;}
.page .bottom {top: 100%;}
.page .fan {position: absolute; width: 1rem; height: 1.8rem; left: 3rem; top: 9rem; display: none; background-image: url("../images/fan_img.gif"); background-size: 100%; background-repeat: no-repeat;}
.page .glove {position: absolute; width: 1.5rem; height: 1.7rem; left: 3rem; top: 9rem; display: none; background-image: url("../images/boxing_glove.png"); background-size: 100%; background-repeat: no-repeat;}
.page .crow {position: absolute; width: 1.5rem; height: 1.5rem; background-image: url("../images/crow_fly.gif"); background-size: 100%; background-repeat: no-repeat;}
.page .crow.down {background-image: url("../images/crow_down.png"); -webkit-animation: crowDown 1s forwards linear; animation: crowDown 1s forwards linear;}
.page .crow img {width: 1.13rem; display: none;}
.page .crow.left {-webkit-transform:scaleX(-1); transform:scaleX(-1);}
.page .complete-box {position: absolute; width: 5.8rem; height: 5rem; background-color: rgba(0,0,0,.5); border-radius: .2rem; top: 50%; left: 50%; margin-top: -2.5rem; margin-left: -2.9rem; display: none;}
.page .complete-box img {width: 5.8rem; display: none;}
.page .cloud {position: absolute; width: 4rem;}
.page .cloud.left {left: -80%;}
.page .cloud.right {left: 100%;}
.page .bullet {width: .25rem; position: absolute; left: 0; top: 100%; margin-left: -.12rem;}



@-webkit-keyframes upOneAn {
    from {
        bottom: 0;
    }
    to {
        bottom: -100vh;
    }
}

@keyframes upOneAn {
    from {
        bottom: 0;
    }
    to {
        bottom: -100vh;
    }
}

@-webkit-keyframes upTwoAn {
    from {
        bottom: -100vh;
    }
    to {
        bottom: -200vh;
    }
}

@keyframes upTwoAn {
    from {
        bottom: -100vh;
    }
    to {
        bottom: -200vh;
    }
}

@-webkit-keyframes flagBoxOver {
    from {
        bottom: 0;
    }
    to {
        bottom: -40vh;
    }
}

@keyframes flagBoxOver {
    from {
        bottom: 0;
    }
    to {
        bottom: -40vh;
    }
}

@-webkit-keyframes crowDown {
    from {
        transform: translateY(0%);
        opacity: 1;
    }
    to {
        transform: translateY(20%);
        opacity: 0;
    }
}

@keyframes crowDown {
    from {
        transform: translateY(0%);
        opacity: 1;
    }
    to {
        transform: translateY(20%);
        opacity: 0;
    }
}

